<template>
  <TopNavBar :title="_t18('19_my_order')" @rightClick="handleRightClick" type="back" />
   <!-- ✅ 下拉刷新包裹 -->
    <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh">
  <div class="order-detail-page">
    <div class="order-tabs">
      <div :class="['tab', { active: activeTab === 'current' }]" @click="selectActive('current')">
        {{ _t18('19_current_position') }}
      </div>
      <div :class="['tab', { active: activeTab === 'history' }]" @click="selectActive('history')">
        {{ _t18('19_history_position') }}
      </div>
    </div>

    <!-- 持仓明细 -->
    <div v-if="activeTab === 'current'">
      <div v-if="currentOrders.length === 0" class="empty-box">
        <img class="empty-icon" src="/static/img/W2k_c7838bd9_spH.cd0c5744.png" alt="empty" />
        <div class="empty-text">{{ _t18('19_no_record') }}</div>
      </div>
      <div v-else>
        <div v-for="(order, idx) in currentOrders" :key="idx" class="order-card">
          <div class="order-card-header">
            <span class="pair">{{ order.coinSymbol }}/USDT</span>
            <span class="tag rise" v-if="order.betContent == 1">{{ _t18('19_rise') }}</span>
            <span class="tag fall" v-if="order.betContent == 0">{{ _t18('19_fall') }}</span>
            <span v-if="order.status == 0" class="status">{{ _t18('19_holding') }}</span>
            <span v-if="order.status == 1" class="status done">{{ _t18('19_completed') }}</span>
          </div>
        
          <div class="order-card-body">
            <div class="row">
              <span class="label">{{ _t18('19_buy_time') }}</span>
              <span class="value">{{ convertBeijingToZone12(order.openTime, order.timeZone) }}</span>
            </div>
            <div class="row">
              <span class="label price-label">
<img
  class="exchange-icon"
  :src="exchanges.find(ex => ex.id == order.buyPlat)?.icon || '/static/img/default-exchange.png'"
  alt="exchange"
/>
                {{ order.exchange }}{{ _t18('19_price') }}
              </span>
              <span class="value">{{ order.openPrice }}$</span>
            </div>
            <div class="row">
              <span class="label">{{ _t18('19_buy_amount') }}</span>
              <span class="value">{{ order.betAmount }}USD</span>
            </div>
            <div class="row">
              <span class="label">{{ _t18('19_profit_rate') }}</span>
              <span class="value">{{ (order.rate * 100).toFixed(0) }}%</span>
            </div>
          </div>
        
          <!-- ✅ 逼真倒计时进度条 -->
          <div class="progress-wrapper">
           <div class="progress-time">
            
            <!-- ✅ 卡片式倒计时 -->
            <div v-if="order.status == 0 || order.status == 3" class="history-countdown-line">
              <div class="history-countdown-card-wrap">
                <div v-if="formatCountdown(order).show.includes('d')" class="history-count-card gray">
                  <div class="num">{{ formatCountdown(order).days }}</div>
                  <div class="label">{{ _t18('day') }}</div>
                </div>
                <div v-if="formatCountdown(order).show.includes('h')" class="history-count-card red">
                  <div class="num">{{ formatCountdown(order).hours }}</div>
                  <div class="label">{{ _t18('hour') }}</div>
                </div>
                <div v-if="formatCountdown(order).show.includes('m')" class="history-count-card green">
                  <div class="num">{{ formatCountdown(order).minutes }}</div>
                  <div class="label">{{ _t18('minute') }}</div>
                </div>
                <div v-if="formatCountdown(order).show.includes('s')" class="history-count-card yellow">
                  <div class="num">{{ formatCountdown(order).seconds }}</div>
                  <div class="label">{{ _t18('second') }}</div>
                </div>
              </div>
            </div>





             <span v-else class="done-text">{{ _t18('19_completed') }}</span>
           </div>

            <div class="progress-bar">
              <div
                class="progress-fill"
                :class="{ complete: order.progress >= 100 }"
                :style="{ width: order.progress + '%' }"
              ></div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- 历史明细 -->
    <!-- 历史明细 -->
    <div v-if="activeTab === 'history'">
      <div v-if="historyOrders.length === 0" class="empty-box">
        <img class="empty-icon" src="/static/img/W2k_c7838bd9_spH.cd0c5744.png" alt="empty" />
        <div class="empty-text">{{ _t18('19_no_record') }}</div>
      </div>
      <div v-else>
        <div v-for="(order, idx) in historyOrders" :key="idx" class="order-card history">
          <div class="order-card-header">
            <!-- ✅ 币种转大写 -->
            <span class="pair">{{ (order.coinSymbol || '').toUpperCase() }}/USDT</span>
            <span class="tag rise" v-if="order.betContent == 1">{{ _t18('19_rise') }}</span>
            <span class="tag fall" v-if="order.betContent == 0">{{ _t18('19_fall') }}</span>
			<!-- ✅ 倒计时存在且大于 0 才显示 -->
			<span
			  v-show="order.countdown > 0"
			 class="countdown1"
			  :class="{
			    fast: order.flashMode === 'fast',
			    normal: order.flashMode === 'normal'
			  }"
			>
			 <!-- {{ order.countdown }}s-->
			</span>



            <span v-if="order.status == 0" class="status">{{ _t18('19_holding') }}</span>
            <span v-if="order.status == 1" class="status done">{{ _t18('19_completed') }}</span>
            <div v-if="order.status == 3" class="status success">{{ _t18('21_pending_settle') }}</div>
            <div v-if="order.status == 2" class="status success">{{ _t18('19_canceled') }}</div>
          </div>
    
          <div class="order-card-body">
            <div class="row">
              <span class="label">{{ _t18('19_buy_time') }}</span>
            <span class="value">{{ convertBeijingToZone12(order.openTime, order.timeZone) }}</span>
            </div>
    
            <div class="row">
              <span class="label price-label">
                <img
                  class="exchange-icon"
                  :src="exchanges.find(ex => ex.id == order.buyPlat)?.icon || '/static/img/default-exchange.png'"
                  alt="exchange"/>
                {{ exchanges.filter(excc => excc.id == order.buyPlat)[0].exchangeName }}{{ _t18('19_price') }}
              </span>
              <span class="value">{{ (Number(order.openPrice) + Number(exchanges.filter(excc => excc.id == order.buyPlat)[0].spread)).toFixed(5) }}$</span>
            </div>
    
            <div class="row">
              <span class="label">{{ _t18('19_buy_amount') }}</span>
              <span class="value">{{ order.betAmount }}USD</span>
            </div>
    
            <div class="row">
              <span class="label">{{ _t18('19_profit_rate') }}</span>
              <span class="value">{{ (order.rate * 100).toFixed(0) }}%</span>
            </div>
    
            <!-- ✅ 卖出价格 -->
            <div class="row">
              <span class="label price-label">
                <img
                  class="exchange-icon"
                  :src="exchanges.find(ex => ex.id == order.sellPlat)?.icon || '/static/img/default-exchange.png'"
                  alt="exchange"
                />
                {{ exchanges.filter(excc => excc.id == order.sellPlat)[0].exchangeName }}{{ _t18('19_price') }}
              </span>
              <span class="value" :class="{ waiting: order.status == 3 || order.status == 0 }">
                <template v-if="order.status == 3 || order.status == 0">{{ _t18('21_pending_settle') }}</template>
                <template v-else>
                  {{ (Number(order.closePrice) + Number(exchanges.filter(excc => excc.id == order.sellPlat)[0].spread)).toFixed(5) }}$
                </template>
              </span>
            </div>
            
            <!-- ✅ 盈利 -->
            <div class="row">
              <span class="label">{{ _t18('19_profit') }}</span>
              <span
                class="value"
                :class="{
                  profit: order.rewardAmount > 0 && order.status != 3 && order.status != 0,
                  loss: order.rewardAmount <= 0 && order.status != 3 && order.status != 0,
                  waiting: order.status == 3 || order.status == 0
                }"
              >
                <template v-if="order.status == 3 || order.status == 0">{{ _t18('21_pending_settle') }}</template>
                <template v-else-if="order.rewardAmount > 0">
                  <span class="profit-num">+{{ order.rewardAmount }}</span><span class="usd">USD</span>
                </template>
                <template v-else>
                  <span class="loss-num">-{{ order.betAmount - order.rewardAmount }}</span><span class="usd">USD</span>
                </template>
              </span>
            </div>

<!-- ✅ 历史订单倒计时（未结算才显示） -->
<div v-if="order.status == 0 || order.status == 3" class="history-countdown-line">
  <div class="history-countdown-card-wrap">
    <div v-if="formatCountdown(order).show.includes('d')" class="history-count-card gray">
      <div class="num">{{ formatCountdown(order).days }}</div>
      <div class="label">{{ _t18('day') }}</div>
    </div>
    <div v-if="formatCountdown(order).show.includes('h')" class="history-count-card red">
      <div class="num">{{ formatCountdown(order).hours }}</div>
      <div class="label">{{ _t18('hour') }}</div>
    </div>
    <div v-if="formatCountdown(order).show.includes('m')" class="history-count-card green">
      <div class="num">{{ formatCountdown(order).minutes }}</div>
      <div class="label">{{ _t18('minute') }}</div>
    </div>
    <div v-if="formatCountdown(order).show.includes('s')" class="history-count-card yellow">
      <div class="num">{{ formatCountdown(order).seconds }}</div>
      <div class="label">{{ _t18('second') }}</div>
    </div>
  </div>





</div>
</div>


          
    
          <button class="detail-btn" @click="goToDetail(order.id)">{{ _t18('19_view_detail') }}</button>
        </div>
      </div>
    </div>

  </div>
   </van-pull-refresh>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { secondContractOrderselectOrderList } from '@/api/trade/index'
import { getContractListApi } from '@/api/ai/index'
import { _t18, _beijingToLocal, convertBeijingToZone } from '@/utils/public'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

function formatCountdown(order) {
  if (!order.openTime || !order.closeTime) {
    return { days: '00', hours: '00', minutes: '00', seconds: '00', show: ['s'] }
  }

  const start = new Date(order.openTime).getTime()
  const end = new Date(order.closeTime).getTime()
  const now = Date.now()
  let remain = Math.max(0, (end - now) / 1000)

  const days = Math.floor(remain / 86400)
  remain %= 86400
  const hours = Math.floor(remain / 3600)
  remain %= 3600
  const minutes = Math.floor(remain / 60)
  const seconds = Math.floor(remain % 60)

  // ✅ 根据剩余时间动态显示单位层级
  let show = []
  if (days > 0) {
    show = ['d', 'h', 'm', 's']
  } else if (hours > 0) {
    show = ['h', 'm', 's']
  } else if (minutes > 0) {
    show = ['m', 's']
  } else {
    show = ['s']
  }

  return {
    days: days.toString().padStart(2, '0'),
    hours: hours.toString().padStart(2, '0'),
    minutes: minutes.toString().padStart(2, '0'),
    seconds: seconds.toString().padStart(2, '0'),
    show
  }
}





// ✅ 根据订单时间计算进度百分比
// ✅ 根据订单时间计算进度百分比
function getProgress(order) {
  if (!order.openTime || !order.closeTime) return 0

  const start = new Date(order.openTime).getTime()
  const end = new Date(order.closeTime).getTime()
  const now = Date.now()

  if (now >= end) return 100
  if (now <= start) return 0

  let percent = ((now - start) / (end - start)) * 100

  // ✅ 模拟真实：前 80% 均匀、最后 20% 放慢速度
  if (percent > 80 && percent < 100) {
    percent = 80 + (percent - 80) * 0.5
  }

  // ✅ 边界保护
  return Math.min(Math.max(percent, 0), 100)
}


// ✅ 计算剩余时间并格式化显示（天、小时、分钟、秒）
// ✅ 格式化剩余时间（始终显示：天 时 分 秒）
// ✅ 支持多语言的完整倒计时格式化函数（始终显示天 时 分 秒）
function getRemainSeconds(order) {
  if (!order.openTime || !order.closeTime)
    return `0${t('day')} 0${t('hour')} 0${t('minute')} 0${t('second')}`

  const start = new Date(order.openTime).getTime()
  const end = new Date(order.closeTime).getTime()
  const now = Date.now()
  let remain = Math.max(0, (end - now) / 1000)

  const days = Math.floor(remain / 86400)
  remain %= 86400
  const hours = Math.floor(remain / 3600)
  remain %= 3600
  const minutes = Math.floor(remain / 60)
  const seconds = Math.floor(remain % 60)

  // ✅ 自动多语言格式
  return `${days}${t('day')} ${hours}${t('hour')} ${minutes}${t('minute')} ${seconds}${t('second')}`
}





// ✅ 改进版：12 小时制时间格式（含 AM/PM，兼容性更好）
function convertBeijingToZone12(time, timeZone) {
  // 调用原函数拿到字符串
  const timeStr = convertBeijingToZone(time, timeZone)
  if (!timeStr) return '-'

  // 如果是字符串格式 "YYYY-MM-DD HH:mm:ss"
  const parts = timeStr.match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2}):(\d{2})/)
  if (!parts) return timeStr // 不匹配就原样返回

  const [, year, month, day, hourStr, minute, second] = parts
  const hour = parseInt(hourStr, 10)
  const ampm = hour >= 12 ? 'PM' : 'AM'
  const displayHour = hour % 12 === 0 ? 12 : hour % 12

  // 返回格式：YYYY-MM-DD hh:mm:ss AM/PM
  return `${year}-${month}-${day} ${displayHour}:${minute}:${second} ${ampm}`
}


const router = useRouter()
const activeTab = ref('current')
const currentOrders = ref([])
const historyOrders = ref([])
const exchanges = ref([])

function selectActive(val) {
  activeTab.value = val
  getList(val === 'current' ? 0 : 1)
}

function goToDetail(id) {
  router.push({ path: '/quantContractOrderDetail', query: { id } })
}

const getList = async (status) => {
  var res
  if (status == 0) {
    res = await secondContractOrderselectOrderList({ status, aiType: '2' })
  } else {
    res = await secondContractOrderselectOrderList({ aiType: '2' })
  }

  if (res.code === 200) {
    if (status === 0) currentOrders.value = res.data
    else historyOrders.value = res.data
  }
}

const initExchanges = async () => {
  const res = await getContractListApi()
  if (res.code === 200) exchanges.value = res.data
}

onMounted(() => {
  // 初始化交易所列表
  initExchanges()

  // 首次加载当前持仓列表
  getList(0)

  // ✅ 每秒检查订单进度并刷新
  const timer = setInterval(() => {
    if (activeTab.value !== 'current' || currentOrders.value.length === 0) return

    let needRefresh = false

    currentOrders.value.forEach(order => {
      // === 1️⃣ 判断订单时间格式 ===
      let startTime = order.openTime
      if (typeof startTime === 'string') {
        startTime = startTime.replace(/-/g, '/')
      }
      const start = new Date(startTime).getTime()

      // === 2️⃣ 如果后端返回有持续时间字段就用，没有就用固定周期（例如 60s）===
      const duration = order.type ? order.type * 1000 : 60 * 1000 // 默认一分钟周期

      // === 3️⃣ 计算进度 ===
      const now = Date.now()
      const progress = ((now - start) / duration) * 100

      // === 4️⃣ 达到或超过100%触发刷新 ===
      if (progress >= 100) {
        needRefresh = true
      }

      // === 5️⃣ 动态赋值进度条显示用 ===
      order.progress = Math.min(progress, 100)
	  document.documentElement.style.setProperty('--progress', order.progress)
    })

    // === 6️⃣ 如果有任意订单走完，刷新数据 ===
    if (needRefresh) {
      console.log('✅ 检测到进度100%，自动刷新列表')
      getList(0)
    }

    // 强制触发视图刷新（保证进度条联动）
    currentOrders.value = [...currentOrders.value]
  }, 1000)

  // ✅ 页面卸载清理定时器
  onUnmounted(() => {
    clearInterval(timer)
  })
})



// ✅ 优化版倒计时逻辑（无闪烁 + 0秒不显示）
// ✅ 不闪烁版本：只更新数字，到 0 后刷新一次历史订单
const startCountdown = () => {
  let refreshTriggered = false // 防止重复刷新

  const timer = setInterval(() => {
    if (activeTab.value !== 'history' || !historyOrders.value.length) return

    let allFinished = true

    for (const order of historyOrders.value) {
      if (!order.openTime) continue

      let startTime = order.openTime
      if (typeof startTime === 'string') startTime = startTime.replace(/-/g, '/')
      const start = new Date(startTime).getTime()

      const duration = order.type ? order.type * 1000 : 60 * 1000
      const remain = Math.max(0, duration - (Date.now() - start))
      const secondsLeft = Math.floor(remain / 1000)

      // ✅ 更新倒计时
      if (order.countdown !== secondsLeft) order.countdown = secondsLeft

      // ✅ 动态控制闪烁模式
      const progress = 1 - remain / duration
      if (progress < 0.9) order.flashMode = 'normal'
      else order.flashMode = 'fast'

      // ✅ 👇 新增：某一单结束就刷新一次
      if (secondsLeft <= 0 && !refreshTriggered) {
        refreshTriggered = true
        console.log('⏰ 单个倒计时结束，刷新历史订单')
        setTimeout(async () => {
          await getList(1)
          refreshTriggered = false
        }, 500)
      }

      if (secondsLeft > 0) allFinished = false
    }

    // ✅ 兜底逻辑：所有结束时再刷新一次
    if (allFinished && !refreshTriggered) {
      refreshTriggered = true
      console.log('⏰ 所有倒计时结束，刷新历史订单')
      setTimeout(async () => {
        await getList(1)
        refreshTriggered = fa.lse
      }, 500)
    }
  }, 1000)

  onUnmounted(() => clearInterval(timer))
}





onMounted(() => {
  initExchanges()
  getList(0)
  // ✅ 初始化倒计时
  startCountdown()
})


import { PullRefresh } from 'vant'
const isRefreshing = ref(false) // ✅ 下拉刷新状态

// ✅ 下拉刷新逻辑
const onRefresh = async () => {
  await getList(activeTab.value === 'current' ? 0 : 1)
  isRefreshing.value = false
}

</script>


<style scoped>
.order-detail-page {
  background: #f6f8fa;
  min-height: 100vh;
  padding: 24px 0 0 0;
}

.order-tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  border-radius: 28px;
  margin: 0 auto 32px auto;
  width: 340px;
  height: 48px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
}
.tab {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 0;
  border-radius: 24px;
  color: #222;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.tab.active {
  background: #000;
  color: #fff;
}

.order-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
  padding: 22px 20px 18px 20px;
  margin: 0 auto 18px auto;
  width: 360px;
  max-width: 95vw;
}

.order-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.order-card-header .pair {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  margin-right: 10px;
}

/* ✅ 看涨/看跌样式（文字和箭头都为白色） */
.order-card-header .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 17px;
  line-height: 17px;
  font-size: 11px;
  color: #fff !important; /* ✅ 强制白色文字 */
  border-radius: 8px 24px 8px 8px;
  margin-right: 10px;
  font-weight: 600;
}

/* 看涨：绿色背景 + 白色文字 + ↑ */
.order-card-header .tag.rise {
  background: #03b303;
  color: #fff !important;
}
.order-card-header .tag.rise::after {
  content: '↑';
  font-size: 10px;
  margin-left: 3px;
  color: #fff !important;
}

/* 看跌：红色背景 + 白色文字 + ↓ */
.order-card-header .tag.fall {
  background: #fa190c;
  color: #fff !important;
}
.order-card-header .tag.fall::after {
  content: '↓';
  font-size: 10px;
  margin-left: 3px;
  color: #fff !important;
}

/* ✅ 状态颜色区分 */
.order-card-header .status {
  font-size: 14px;
  font-weight: 700;
  margin-left: auto;
}
.order-card-header .status.holding {
  color: #f10430; /* 持仓中 - 红色 */
}
.status {
 color: #ff9800; /* 持仓中 - 红色 */
}
.order-card-header .status.done {
  color: #03b303; /* 已完成 - 绿色 */
}
.order-card-header .status.settle {
  color: #ff9800; /* 结算中 - 橙色 */
}
.order-card-header .status.cancel {
  color: #999; /* 已撤销 - 灰色 */
}

.order-card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  line-height: 1.5;
}
.order-card-body .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: #222;
}
.order-card-body .label {
  color: #666;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.order-card-body .price-label {
  display: flex;
  align-items: center;
}
.exchange-icon {
  width: 22px;
  height: 22px;
  margin-right: 4px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eee;
}
.order-card-body .value {
  color: #222;
  font-weight: 200;
}
.order-card.history {
  padding: 24px 22px 28px 22px;
  margin: 14px auto;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  background: #fff;
}
.order-card-body .value.profit {
  color: #00c6a2;
  font-size: 14px;
  font-weight: 700;
}
.detail-btn {
  display: block;
  width: 90%;
  margin: 18px auto 0 auto;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 0;
  cursor: pointer;
  transition: background 0.2s;
}
.detail-btn:hover {
  background: #222;
}
.empty-box {
  margin: 80px auto 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.empty-icon {
  width: 90px;
  height: 90px;
  margin-bottom: 18px;
}
.empty-text {
  font-size: 14px;
  color: #888;
  font-weight: 600;
}
.value.waiting {
  color: #999;         /* 灰色字体 */
  font-weight: 500;
}
/* ✅ 盈利金额和USD分色 */
.profit-num {
  color: #00c693; /* 绿色数字 */
  font-weight: 700;
}
.loss-num {
  color: #fa190c; /* 红色数字 */
  font-weight: 700;
}
.usd {
  color: #000; /* USD 黑色 */
  margin-left: 2px;
  font-weight: 500;
}

/* ✅ 时间进度条样式 */
/* ✅ 时间进度条样式（逼真动态版） */
.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(230, 230, 230, 0.9);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 10px;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #17ac74, #ffcc00, #fa190c);
  background-size: 300% 100%;
  animation: progressGlow 2s linear infinite; /* ✅ 动态流动效果 */
  transition: width 0.6s ease-in-out; /* ✅ 平滑增长 */
  border-radius: 8px;
}

/* ✅ 光流动画 */
@keyframes progressGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ✅ 完成时闪一下亮光 */
.progress-fill.complete {
  animation: completeFlash 0.8s ease-in-out;
}

@keyframes completeFlash {
  0% { background: linear-gradient(90deg, #a4ff00, #00ff99); }
  100% { background: linear-gradient(90deg, #17ac74, #ffcc00, #fa190c); }
}

.countdown {
  background: #ff0000;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 6px;
  transition: all 0.3s linear; /* ✅ 平滑过渡 */
}




/* ✅ 进度条容器（带时间显示） */
/* ===============================
/* ===============================
   ✅ 高级交易能量进度条（能量球 + 拖尾光）
   =============================== */
/* ===============================
   ✅ 动态倒计时进度条（逼真交易风格）
   =============================== */
.progress-wrapper {
  width: 100%;
  margin-top: 12px;
  position: relative;
}

/* 剩余时间数字 */
.progress-time {
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
  transition: color 0.3s ease;
}
.progress-time .done-text {
  color: #00c693;
  font-weight: 700;
  animation: doneFlash 1.2s ease-in-out;
}

/* 进度条主体 */
.progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(240, 240, 240, 0.95);
  position: relative;
}

/* ✅ 渐变进度填充 */
.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    #00ff9d,
    #a4ff00,
    #ffd200,
    #ff8c00,
    #fa190c
  );
  background-size: 400% 100%;
  animation: progressGlow 2s linear infinite;
  transition: width 0.6s ease-in-out, filter 0.5s ease-in-out;
  filter: brightness(1.3);
}

/* ✅ 根据进度动态减弱光效 */
.progress-fill.complete {
  animation: completeFlash 0.8s ease-in-out;
  filter: brightness(1);
}

/* ✅ 发光流动动画 */
@keyframes progressGlow {
  0% { background-position: 0% 50%; filter: brightness(1.3); }
  50% { background-position: 100% 50%; filter: brightness(1.1); }
  100% { background-position: 0% 50%; filter: brightness(1.0); }
}

/* ✅ 完成闪光特效 */
@keyframes completeFlash {
  0% { background: linear-gradient(90deg, #a4ff00, #00ff99); opacity: 0.8; }
  50% { opacity: 1; filter: brightness(1.6); }
  100% { background: linear-gradient(90deg, #17ac74, #ffcc00, #fa190c); opacity: 1; }
}

/* ✅ 数字跳动动画 */
.time-animate {
  display: inline-block;
  animation: fadeScale 1s ease-in-out infinite;
}
@keyframes fadeScale {
  0% { opacity: 0.4; transform: scale(0.95); }
  30% { opacity: 1; transform: scale(1.05); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.8; transform: scale(0.98); }
}

/* ✅ 完成文字轻闪 */
@keyframes doneFlash {
  0% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* ===============================
   ✅ 历史订单数字倒计时样式（绿→黑→红 + 动态呼吸）
   =============================== */
/* ✅ 历史订单倒计时默认样式 */
/* ✅ 历史订单倒计时通用样式 */
.history .countdown {
  display: inline-block;
  min-width: 48px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
}

/* ✅ 前70% 平稳呼吸闪烁 */
.history .countdown.normal {
  color: #03b303;
  box-shadow: 0 0 6px rgba(3, 179, 3, 0.3);
  animation: countdownPulseSmooth 1.6s ease-in-out infinite;
}

@keyframes countdownPulseSmooth {
  0% {
    transform: scale(0.96);
    opacity: 0.7;
    color: #03b303;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
    color: #222;
  }
  100% {
    transform: scale(0.98);
    opacity: 0.85;
    color: #fa190c;
  }
}

/* ✅ 后30% 柔和橙红呼吸发光（不刺眼） */
.history .countdown.fast {
  color: #fff;
  background: linear-gradient(90deg, #ff4c1c, #fa190c);
  box-shadow: 0 0 10px rgba(250, 25, 12, 0.4);
  animation: countdownFadeOut 1.2s ease-in-out infinite;
}

@keyframes countdownFadeOut {
  0% {
    transform: scale(0.97);
    opacity: 0.9;
    filter: brightness(1.2);
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
    filter: brightness(1.4);
  }
  100% {
    transform: scale(0.98);
    opacity: 0.8;
    filter: brightness(1);
  }
}
/* ✅ 倒计时方块样式 */
/* ✅ 倒计时方块容器 */
.countdown-box {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 8px;
}

/* ✅ 每个方块的样式 */
.time-square {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', Courier, monospace;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  animation: pulseSquare 1.4s ease-in-out infinite;
}

/* ✅ 方块颜色 */
.time-square.gray {
  background: #9e9e9e; /* 天 */
}
.time-square.red {
  background: #f44336; /* 时 */
}
.time-square.green {
  background: #4caf50; /* 分 */
}
.time-square.yellow {
  background: #ffca28; /* 秒 */
  color: #222;
}

/* ✅ 方块呼吸动画 */
@keyframes pulseSquare {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.97); opacity: 0.85; }
}

/* ===============================
   ✅ 卡片式倒计时样式
   =============================== */
.countdown-card-wrap {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
}

/* ✅ 单个卡片容器 */
.count-card {
  width: 46px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25),
              inset 0 -2px 4px rgba(255, 255, 255, 0.2);
  position: relative;
  background: linear-gradient(180deg, #222, #111);
  transform-style: preserve-3d;
  perspective: 1000px;
  animation: cardFloat 3s ease-in-out infinite;
  transition: all 0.3s ease;
}

/* ✅ 数字部分 */
.count-card .num {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: 'Courier New', Courier, monospace;
  transform: translateZ(12px);
}

/* ✅ 标签部分 */
.count-card .label {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.9;
  margin-top: 4px;
  text-transform: uppercase;
}

/* ✅ 各颜色主题 */
.count-card.gray {
  background: linear-gradient(180deg, #9e9e9e, #757575);
}
.count-card.red {
  background: linear-gradient(180deg, #f44336, #b71c1c);
}
.count-card.green {
  background: linear-gradient(180deg, #4caf50, #1b5e20);
}
.count-card.yellow {
  background: linear-gradient(180deg, #ffca28, #ff9800);
  color: #222;
}

/* ✅ 漂浮轻动效果 
@keyframes cardFloat {
  0%, 100% { transform: translateY(0px) rotateX(0deg); }
  50% { transform: translateY(-3px) rotateX(3deg); }
}*/

/* ✅ 鼠标悬停时发光 */
.count-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.4),
              0 0 10px rgba(255,255,255,0.2);
  transform: scale(1.05);
}



/* ===============================
   ✅ 历史订单专属倒计时样式
   =============================== */
.history-countdown-line {
  margin-top: 10px;
  display: flex;
 justify-content: flex-end; /* ✅ 改成靠右 */
  align-items: center;
}

.history-countdown-card-wrap {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

/* ✅ 单个倒计时卡片（独立于持仓） */
.history-count-card {
  width: 42px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25),
              inset 0 -1px 2px rgba(255, 255, 255, 0.15);
  background: linear-gradient(180deg, #2a2a2a, #111);
  transition: all 0.3s ease;
}

/* ✅ 数字部分 */
.history-count-card .num {
  font-size: 16px;
  font-weight: 800;
  font-family: 'Courier New', Courier, monospace;
}

/* ✅ 标签部分 */
.history-count-card .label {
  font-size: 9px;
  opacity: 0.9;
  font-weight: 600;
  margin-top: 4px;
  text-transform: uppercase;
}

/* ✅ 各颜色主题（独立于持仓） */
.history-count-card.gray {
  background: linear-gradient(180deg, #9e9e9e, #5c5c5c);
  color: #fff; /* 天 */
}
.history-count-card.red {
  background: linear-gradient(180deg, #f44336, #b71c1c);
  color: #fff; /* 时 */
}
.history-count-card.green {
  background: linear-gradient(180deg, #4caf50, #1b5e20);
  color: #fff; /* 分 */
}
.history-count-card.yellow {
  background: linear-gradient(180deg, #ffca28, #ff9800);
  color: #fff; /* 秒 */
}
/* ✅ 历史订单倒计时卡片：天、时、分字体强制白色，秒保持黑色 */
.history-count-card.gray .num,
.history-count-card.gray .label,
.history-count-card.red .num,
.history-count-card.red .label,
.history-count-card.green .num,
.history-count-card.green .label {
  color: #fff !important;
}

/* ✅ 秒卡片依旧黑色（黄色底） */
.history-count-card.yellow .num,
.history-count-card.yellow .label {
  color: #fff !important;
}

/* ✅ 最终修正：强制历史订单倒计时“天、时、分”为白色字体 */
.history-countdown-line .history-count-card.gray .num,
.history-countdown-line .history-count-card.gray .label,
.history-countdown-line .history-count-card.red .num,
.history-countdown-line .history-count-card.red .label,
.history-countdown-line .history-count-card.green .num,
.history-countdown-line .history-count-card.green .label {
  color: #ffffff !important;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.25); /* ✅ 柔光增强对比 */
}

/* ✅ 秒卡片仍为深色字体（黄底上更柔和） */
.history-countdown-line .history-count-card.yellow .num,
.history-countdown-line .history-count-card.yellow .label {
  color: #333 !important;
}


</style>


